<template>
  <!-- 会员详情 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="false" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">

      <el-descriptions :column="2" border title="基础信息">
        <el-descriptions-item label="会员ID">{{ dataForm.card_id }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ dataForm.member_name }}</el-descriptions-item>

        <el-descriptions-item label="卡号">{{ dataForm.card_no }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ dataForm.sex_name }}</el-descriptions-item>

        <el-descriptions-item label="OPENID">{{ dataForm.openid }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ dataForm.age }}</el-descriptions-item>

        <el-descriptions-item label="手机号">{{ dataForm.mobile }}</el-descriptions-item>
        <el-descriptions-item label="身份证">{{ dataForm.identity_id }}</el-descriptions-item>

        <el-descriptions-item label="生日">{{ dataForm.birthday }}</el-descriptions-item>
        <el-descriptions-item label="地区">{{ dataForm.contact_address }}</el-descriptions-item>

        <el-descriptions-item label="邮箱">{{ dataForm.email }}</el-descriptions-item>
        <el-descriptions-item label="学历">{{ dataForm.education }}</el-descriptions-item>
        <el-descriptions-item label="爱好">{{ dataForm.habit }}</el-descriptions-item>
        <el-descriptions-item label="车牌">{{ dataForm.plateNo }}</el-descriptions-item>
        <el-descriptions-item label="行业">{{ dataForm.industry }}</el-descriptions-item>

        <el-descriptions-item label="开卡"><el-tag type="success">{{ dataForm.card_activate? '已开卡':'未开卡' }}</el-tag></el-descriptions-item>
        <el-descriptions-item label="等级"><el-tag type="success">{{ dataForm.level_name }}</el-tag></el-descriptions-item>
        <el-descriptions-item label="注册渠道">{{ dataForm.channel_name }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ dataForm.input_date }}</el-descriptions-item>

        <el-descriptions-item label="升级时间">{{ dataForm.uporde_date }}</el-descriptions-item>
        <el-descriptions-item label="最近消费时间">{{ dataForm.consum_maxdate }}</el-descriptions-item>

        <el-descriptions-item label="当前积分">{{ dataForm.credit }}</el-descriptions-item>
        <el-descriptions-item label="清零积分(年度)">{{ dataForm.clear_credit }}</el-descriptions-item>

        <el-descriptions-item label="状态">
          <el-tag v-if="dataForm.status === 0" type="success">正常</el-tag>
          <el-tag v-else type="warning">禁用</el-tag>
        </el-descriptions-item>

        <el-descriptions-item :span="2" label="后台备注">{{ dataForm.remark }}</el-descriptions-item>

      </el-descriptions>
    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 会员详情
 */
export default {
  name: 'Details',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      title: '查询会员',
      dataForm: {},
      rules: {
        mobile: [
          { required: true, message: '请输入账号', trigger: ['blur'] }
        ],
        nickname: [
          { required: true, message: '请输入用户名', trigger: ['blur'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur'] }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      // console.log(newVal + '---------------' + oldVal)
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        this.dataForm = this.$u.deepClone(this.data)
        const { member_name } = this.dataForm
        this.title = '查询会员:查询【' + member_name + '】'

        // console.log(this.dataForm)
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      const { member_name } = self.dataForm

      self.$confirm('此操作将修改 【' + member_name + '】 信息，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // 效验数据格式
        self.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 提交更新数据
            self.api.update(self.dataForm).then(() => {
              // 通知信息
              self.$u.msg('操作成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }
        })
      }).catch(() => {
      })

      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
